<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layout</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/svg-pan-zoom.js"></script>
    <script src="/static/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div id="product_name" >{{ product_name }}</div>
    <div id="block_name">{{ block_name }}</div>
    {% verbatim %}
    <div>



    </div>
    <p>{{ a }}</p>
    {% endverbatim %}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            a: 'ad',
            product_name:document.getElementById('product_name').innerText,
            block_name:document.getElementById('block_name').innerText,
            rect:{},
        },
        mounted:function () {
            this.get_layout()
        },
        methods:{
            get_layout:function () {
                that = this
                const url = '/layout/'+this.product_name+'/'+this.block_name
                axios.get(url).then(function (response) {
                    that.rect = response
                    console.log(that.rect)
                }).catch(function (error) {
                    {#console.log(error)#}
                })
            }
        }
    })
</script>
</body>


</html>